<template>
  <div class="cont">
    <div class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import { debounce } from '@/utils';

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener('resize', this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener('resize', this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');

      this.chart.setOption({
        title: {
          text: '确认制作',
          show: true,
          textStyle: {
            color: '#666',
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: { color: '#ccc' }
          },
          axisTick: { show: false },
          axisLabel: {
            color: '#666',
            fontSize: 11
          },
          data: ['2020/11/01', '2020/11/02', '2020/11/03', '2020/11/04', '2020/11/05', '2020/11/06', '2020/11/07']
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { show: false },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 11
          }
        },
        series: [
          {
            type: 'line',
            symbol: 'circle',
            itemStyle: {
              color: '#0980D8'
            },
            symbolSize: 10,
            label: {
              show: true,
              position: 'top',
              color: '#666'
            },
            lineStyle: {
              color: '#0980D8',
              width: 3
            },
            smooth: false,
            data: [11, 31, 25, 45, 9, 53, 10]
          }]
      });
    }
  }
};
</script>

<style scoped>
    .cont {
        width: calc(100% - 40px);
        height: 350px;
        padding: 20px;
        border: 1px solid #E4E4E4;
        border-radius: 10px;
        box-sizing: content-box;
    }
</style>
